<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" 
              size="small" label-width="110px" class="base-search-more">
       <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <el-select style="width: 100%" @change="changeAgent" v-model="params.agentIds" filterable clearable placeholder="--所属区域--">
              <el-option v-for="items in restaurants" :key="'restaurants'+items.id" :label="items.name" :value="items.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属BD">
            <el-select style="width: 100%" :disabled="$store.state.type === 5" @change="$refs.pagination.handleSizeChange(5)"
              v-model="params.bdid" filterable clearable placeholder="--所属BD--">
              <el-option v-for="items in businessDevelopmentList" :key="'businessDevelopmentList'+items.id" :label="items.name" :value="items.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家搜索">
            <el-input style="width: 100%" @keyup.enter.native="$refs.pagination.handleSizeChange(5)"
                      @clear="$refs.pagination.handleSizeChange(5)" placeholder="请输入关键字、ID、手机号" v-model="params.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否有效">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.statusx" placeholder="请选择" clearable>
              <el-option label="有效" :value="1" />
              <el-option label="无效" :value="-1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品类">
            <el-cascader style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" expand-trigger="hover" clearable :options="classlist"
                         :show-all-levels="false" placeholder="选择商家分类" v-model="params.mainClassId" :props="classlistAlias" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商户品质">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.qualityLevel" placeholder="请选择" clearable>
              <el-option label="A档" value="1" />
              <el-option label="B档" value="2" />
              <el-option label="C档" value="3" />
              <el-option label="D档" value="4" />
              <el-option label="E档" value="5" />
              <el-option label="F档" value="6" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="营业状态">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.statu" placeholder="请选择" clearable>
              <el-option label="正在营业" :value="0"></el-option>
              <el-option label="暂停营业" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配送模式">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.isdeliver" placeholder="请选择" clearable>
              <el-option label="平台专送" :value="0"></el-option>
              <el-option label="商家自配送" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到店自取">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.suportself" placeholder="请选择" clearable>
              <el-option label="支持" :value="true"></el-option>
              <el-option label="不支持" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="认证状态">
            <el-select style="width: 100%" @change="$refs.pagination.handleSizeChange(5)" v-model="params.authenticationStatus" placeholder="请选择" clearable>
              <el-option label="两证已上传" :value="1"></el-option>
              <el-option label="两证未上传" :value="2"></el-option>
              <el-option label="仅上传部分" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 12 : 18" style="text-align: right">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(5)">查询</el-button>
            <el-button type="info" @click="reast()">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" style="width: 100%" @sort-change="sortChange">
        <el-table-column label="商家信息" min-width="600px" align="left">
          <template slot-scope="scope">
            <el-row type="flex" justify="space-between">
              <div class="table-first">
                <div class="bus-img">
                  <img :src="'http://image.jiaowawang.cn/'+scope.row.imgpath"/>
                </div>
                <ul class="msg-list">
                  <li class="name">{{scope.row.name}} </li>
                  <li class="text">ID:{{scope.row.id}}<span>|</span>
                    {{scope.row.mainClassName|capitalize(scope.row.subClassName1,scope.row.subClassName2)}}
                  </li>
                  <li class="act">
                    <span v-if="scope.row.activityList.length > 0">
                      <span v-if="scope.row.activityList.filter(i => i.ptype == 4).length">
                        特价*{{scope.row.activityList.filter(i => i.ptype == 4).length}}|
                      </span>
                      <span v-if="scope.row.activityList.filter(i => i.ptype == 2).length">
                        折扣*{{scope.row.activityList.filter(i => i.ptype == 2).length}}|
                      </span>
                      <span v-for="(item,index) in scope.row.activityList.filter(i => i.ptype !=2 && i.ptype != 4)" :key="index +'act'+item.id">
                        {{item.ptype|catactivity}}
                      </span>
                    </span>
                    <span v-if="scope.row.activityList.length == 0">暂无参与活动</span>
                  </li>
                  <li class="text">昨日营业额：{{scope.row.yesterdayPay||'0'}}<span>|</span>昨日销量：{{scope.row.yesterdaySales||'0'}}</li>
                  <li class="text">{{scope.row.bossName}}<span>|</span>{{scope.row.mobile}}</li>
                  <li class="text">{{scope.row.provinceName}}{{scope.row.cityname}}{{scope.row.countyname}}{{scope.row.address}}</li>
                </ul>
              </div>
              <div class="table-second">
                <li class="st1">审核信息</li>
                <li class="st2">
                  <span>营业执照：</span><span :class="{'cur':scope.row.mainimg}">{{scope.row.mainimg?'已上传':'未上传'}}</span>
                </li>
                <li class="st2">
                  <span>餐饮服务许可证：</span><span :class="{'cur':scope.row.tradeimg}">{{scope.row.tradeimg?'已上传':'未上传'}}</span>
                </li>
                <li class="st2"><span>是否绑定银行卡：</span><span>{{scope.row.bindingBank?'已绑定':'未绑定'}}</span></li>
                <li class="table-third">
                  <span :class="{'st1':scope.row.statusx !='-1'}">{{scope.row.statusx=='-1'?'无效':'有效'}}</span>
                  <!--选中有样式-->
                  <span :class="{'st2':scope.row.isdeliver =='0'}">{{scope.row.isdeliver =='0'?'专送':'自配送'}}</span>
                  <span :class="{'st3':scope.row.statu =='0'}">{{scope.row.statu =='0'?'正在营业':'暂停营业'}}</span>
                  <span :class="{'st4':scope.row.suportself}">{{scope.row.suportself?'支持':'不支持'}}</span>
                </li>
              </div>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="monthCount" label="月销量" min-width="100px" sortable="custom" align="left" />
        <el-table-column prop="monthPay" label="月营业额" min-width="100px" sortable="custom" align="left" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <div>
              <router-link :to="{path:'/main/busnt/check',query:{id:scope.row.id}}">
                <el-button type="text" class="btn" size="mini">查看详情</el-button>
              </router-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :size="{pageSize: 5,pageSizes: [5, 10, 15, 30]}" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
  </div>
</template>
<script>
  import { businessDevelopment, businessTypeList, businessList } from '@/api/busnt.js'
  export default {
    data() {
      return {
        classlist: [],// 分类列表
        classlistAlias: { children: 'subList', value: "id", label: "name" },
        isloadingTable: false, //表单等待
        params: { //表格查询
          page: 0,
          size: 5,
          name: '', // 商家名称
          statusx: null, //-1无效，其他有效
          mainClassId: [],//分类
          agentIds: null, //区域
          bdid: null, // BD
          qualityLevel: null, //商家品质
          statu: null, //营业状态
          isdeliver: null,  //配送方式
          suportself: null,//是否支持自取
          orderByField: '', // 月销量：monthCount  月营业额：monthPay
          orderBy: '', // asc、desc 升序降序
          authenticationStatus: null //ren
          //mobile: '' //商家电话
        },
        businessDevelopmentList: [], //BD列表
        tableData: {} //表单数据
      }
    },
    computed: {
      restaurants() { // 区域据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val) {
          if (val && val.length ===1) {
            this.params.agentIds = val[0].id
          }
        },
        deep: true
      },
      'params.agentIds': {
        handler(val, old) {
          if (val) {
            this.getCategoryList(val)
            this.getBusinessDevelopment(val)
          } else {
            this.businessDevelopmentList = []
            this.classlist = []
          }
        },
        deep: true
      }
    },
    filters: {
      capitalize(t1, t2, t3) {
        let arr = [t1, t2, t3]
        arr.forEach((item, index) => {
          if (!item) arr.splice(index, 1)
        })
        return arr.length > 0 ? arr.join('、') : ''
      },
      catactivity(ptype) {
        const a = ['满减', '折扣', '赠品', '特价', '满减免运费', '优惠券', '免部分配送费', '新用户立减', '首单立减', '商户红包', '下单返红包', '区域红包']
        return a[ptype - 1] + '|'
      }
    },
    methods: {
      getCategoryList(agentId) {  //获取分类数据
        businessTypeList({ agentId }).then(res => {
          if (res.success) {
            this.classlist = res.data
            this.classlist.forEach((item, index) => {
              if (item.subList.length == 0) {
                delete this.classlist[index]
              } else {
                item.subList.forEach((list, index1) => {
                  delete list.subList
                })
              }
            })
          }
        })
      },
      getBusinessDevelopment(agentId) { // 获取BD数据
        businessDevelopment({ agentId }).then(res => {
          if (res.success) {
            this.businessDevelopmentList = res.data
            if (this.$store.state.type === 5) this.params.bdid = this.businessDevelopmentList[0].id || ''
          }
        })
      },
      sortChange(res) { // 排序监听
        this.params.orderByField = res.prop
        this.params.orderBy = res.order === 'ascending' ? 'asc': res.order === 'descending' ? 'desc': ''
        this.getTableList()
      },
      changeAgent() { // 切换代理商
        this.params.bdid = null
        this.params.mainClassId = []
        this.$refs.pagination.handleSizeChange(5)
      },
      getTableList() {//获取商家列表
        this.isloadingTable = true
        const params = {...this.params }
        params.mainClassId = params.mainClassId.length > 0 ? params.mainClassId[1] : ''
        businessList(params).then(res => {
          if (res.success) {
            this.tableData = res.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      reast() { // 重置
        this.params = { ...this.$options.data().params,
          agentIds: this.params.agentIds,
          orderByField: this.params.orderByField,
          orderBy: this.params.orderBy
        }
        this.getTableList()
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length === 1) {
        this.params.agentIds = this.restaurants[0].id
      }
      this.getTableList()
    }
  }
</script>
<style lang="scss" scoped>
  @import '/css/list.scss';
</style>
